<?php
    $this->headTitle($this->site_name.' - Edit Client');
?>

<script type="text/javascript" src="/js/ui/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.draggable.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.droppable.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.sortable.min.js"></script>

<style>
	.draggable1, .draggable2 { cursor:pointer;}
	.sortable { list-style-type: none; margin: 0; padding: 0;  }
	.sortable li { margin: 0 3px 3px 3px;  }
	.sortable li a { position: absolute;  }
	
</style>

<script>
<?php
	echo "var services=new Array();\n";
	echo "var departments=new Array();\n";
	echo "var serviceurl=new Array();\n";
	$all_services = $this->all_services;
	foreach ($all_services as $key => $value){
		echo "services['".$value['icon']."']='".$value['dpt_name']."';\n";
		echo "departments['".$value['icon']."']='".$value['dpt_id']."';\n";
		echo "serviceurl['".$value['icon']."']='".$value['service_url']."';\n";
	} 
?>

	function generateForm(id){
		$("#subsribe-dialog").html('<div style="margin:10px 0 10px 10px">Please input client\'s '+services[id]+' account id and password:</div>\
				<div class=left style="margin:10px 50px 0 10px"><ul><li id="'+id+'1"><div><a href="'+serviceurl[id]+'" target=_blank>'+services[id]+'</a>\
				<span></span></div></li></ul><div style="float:left;margin:2px 5px;">No account yet?<br><a href="'+serviceurl[id]+'" target=_blank>Create account</a></div></div>\
				<div class=left><form name="subscribe" id="subscribe" method="post" onsubmit="return checkForm();">\
				<input type=hidden name="dpt_id" id="dpt_id" value="'+departments[id]+'">\
				<label>Username or Account ID:</label><input type="text" name="account_id" id="account_id" value="" onkeyup=" $(\'#account_id_error\').hide()">\
				<label id="account_id_error" class="error" style="display:none;">Account id can not be empty</label>\
				<br><label>Password:</label><input type="password" name="password" id="password" value="" onkeyup=" $(\'#password_error\').hide()">\
				<label id="password_error" class="error" style="display:none;">Password can not be empty</label>\
				<br><input type="submit" name="submit" id="submit" value="Submit" style="margin:10px 0;">\
				</form></div>');
	
	}

	function checkForm(){
		var flag=false;
		if ($("#account_id").val()==''){
			$("#account_id_error").show();
			flag=true;
		}
		if ($("#password").val()==''){
			$("#password_error").show();
			flag=true;
		}
		if (flag) return false; else return true;
	}

	function subscribe_service(){
		var currentId  = $("#service_id").val();
		generateForm(currentId);
		$("#subsribe-dialog").dialog("open");
	}		
</script>


<script>
	$(function() {
		$("#subsribe-dialog").dialog({autoOpen:false,modal:true,width:500});
		$("#subsribe-dialog").bind( "dialogclose", function(event, ui){location.reload;});		
		$( "#sortable1" ).sortable();
		$( "#sortable1" ).disableSelection();
		
		$( ".draggable2" ).draggable({revert: true, helper: 'clone'});
		$( "#droppable1" ).droppable({
			drop: function( event, ui ) {
				$( this )
				if (ui.draggable.hasClass('draggable2')){					
					var currentId = ui.draggable.attr('id');					
					generateForm(currentId);
					$("#subsribe-dialog").dialog("open");
				}
			}
		});
	});

	function toggleCheck(id,ele1,ele2){

		if ( $("#"+ele2).html()==''){
			$(".checkmark").remove();
			$(".checked").removeClass('checked');
			$("div[id^=add_button_]").hide();
			$("#"+ele2).append('<img src="/images/Check-32.png" class="checkmark">');
			$("#"+ele1).addClass('checked');
	
			$("#service_id").val(id);
			$("#add_button_"+id).show();
		}else{
			$("#"+ele2).html('');
			$("#"+ele1).removeClass('checked');
			$("#service_id").val('');
			$("#add_button_"+id).hide();
		}
		
	}

	function accountAction(id,dpt_id,dpt_account_id,client_id){
		if ($("#"+id+"_account").hasClass('opened')){
			$("#"+id+"_account").html('');
			$("#"+id+"_account").removeClass('opened');
			$("#"+id+"_account").hide();
		}else{
			$("#"+id+"_account").addClass('opened');
			$("#"+id+"_account").html('<div class=left><a href="/client/index/to-service/did/'+dpt_id+'/aid/'+dpt_account_id+'/cid/'+client_id+'" class="sm-btn" target=_blank><b class="ui-title">Access</b></a></div>\
					<div class=left style="margin-left:10px;"><a href="#" onclick="if (confirm(\'Are you sure to unsubsribe this account?\')) {location=\'/admin/client/edit/id/'+client_id+'/act/remove/dpt_id/'+dpt_id+'/dpt_account_id/'+dpt_account_id+'/client_id/'+client_id+'\';}" class="sm-btn"><b class="ui-title">Remove</b></a></div>\
					<div class=left style="margin-left:10px;"><a href="#" class="sm-btn" onclick="hideAccount(\''+id+'\')"><b class="ui-title">Hide</b></a></div>\
					<div class="clearfix"></div>');
			$("#"+id+"_account").show();
		}
	}

	function hideAccount(id){
		$("#"+id+"_account").html('');
		$("#"+id+"_account").removeClass('opened');
		$("#"+id+"_account").hide();
	}
</script>

<?php if (!empty($this->success_msg)):?>
<div class="response-msg success ui-corner-all"><?php echo $this->success_msg;?></div>
<?php endif ?>

<?php if (!empty($this->error_msg)):?>
<div class="response-msg error ui-corner-all"><?php echo $this->error_msg;?></div>
<?php endif ?>


<div id="admin-dashboard">

<h2>Client Service Edit</h2>
 
<h3 style="color:#666;margin-bottom:0px;padding-bottom:0;">Client Email:&nbsp;&nbsp;<?php echo $this->client_info['email']; ?><span style="margin-left:20px;">id:&nbsp;&nbsp;<?php echo $this->client_id; ?></span></h3>
<div class=clearfix></div>

<div class="section">

<h3>The service(s) already subscribed to client's center account:</h3>
<div id="drag_desc" style="margin:-20px 0 20px 0;"><span class="ui-title">Click on an account will access it directly.</span></div>

<div class="demo-frame1" id="droppable1" style="height:450px">		

	<ul id="sortable1">
<?php if (count($this->client_services)>0):?>
	<?php 
	foreach($this->client_services as $index => $item ){
		//echo '<li id="'.$item['icon'].'"><a href="'.$item['service_url'].'" target=_blank>'.$item['dpt_name'].'<span></span></a><p>'.$item['description'].'<br>Account: '.$item['dpt_id'].'-'.$item['dpt_account_id'].'</p></li>';
		//echo '<li id="'.$item['icon'].'"><a href="/client/index/to-service/did/'.$item['dpt_id'].'/aid/'.$item['dpt_account_id'].'/cid/'.$item['client_id'].'" target=_blank>'.$item['dpt_name'].'<span></span></a><p>'.$item['description'].'<br>Account: '.$item['dpt_id'].'-'.$item['dpt_account_id'].'</p></li>';
		echo '<li id="'.$item[0]['icon'].'"><a href="'.$item[0]['service_url'].'" target=_blank>'.$item[0]['dpt_name'].'<span></span></a><p>'.$item[0]['description'].'<br>Account: ';
		
		foreach($item as $key => $value){
			//echo '<b style="margin-left:15px;"><a href="/client/index/to-service/did/'.$value['dpt_id'].'/aid/'.$value['dpt_account_id'].'/cid/'.$value['client_id'].'" target=_blank>'.$value['dpt_account_login'].'</a></b>';
			echo '<b style="margin-left:15px;"><a href="#" onclick="accountAction(\''.$item[0]['icon'].'\',\''.$value['dpt_id'].'\',\''.$value['dpt_account_id'].'\',\''.$value['client_id'].'\')">'.$value['dpt_account_login'].'</a></b>';
		}
				
		echo '</p>';
		echo '<div id="'.$item[0]['icon'].'_account" style="display:none;margin:10px 0;"></div>';
		echo '</li>';
	}
	?>	
<?php else: ?>
	<li>The client don't have any service right now.</li>
<?php endif ?>
	</ul>

</div>
 
</div>


<div class="section">
<div style="margin-left:80px;">
<h3>All YesUp services:</h3>
<div id="drag_desc" style="margin:-20px 0 20px 0;"><span class="ui-title">Drag the icon from right to left or click on it to subsribe the service.</span></div>

<div class="demo-frame1" id="droppable2">		

	<ul>

	<?php 
	foreach($this->all_services as $index => $item ){
		//echo '<li id="'.$item['icon'].'" class="draggable2"><div id="'.$item['icon'].'_div"  onclick="toggleCheck(\''.$item['icon'].'\',\''.$item['icon'].'_div\',\''.$item['icon'].'_span\');"><a href="#">'.$item['dpt_name'].'</a><span id="'.$item['icon'].'_span"></span><p>'.$item['description'].'</p></div></li>';
		echo '<li id="'.$item['icon'].'" class="draggable2"><div id="'.$item['icon'].'_div"  onclick="toggleCheck(\''.$item['icon'].'\',\''.$item['icon'].'_div\',\''.$item['icon'].'_span\');"><a href="#">'.$item['dpt_name'].'</a><span id="'.$item['icon'].'_span"></span><p>'.$item['description'].'</p></div></li>';
		echo '<div id="add_button_'.$item['icon'].'" style="margin:10px 0 10px 50px;display:none;"><a href="#" class="btn" onclick="subscribe_service();"><span class="ui-title">Subscribe</span></a></div>';
	}
	?>
	</ul>

</div>
 </div>
 
</div>


<input type=hidden name=service_id id=service_id value=''>

<div id="subsribe-dialog" title="Subscribe service to client's center account" style="display:none;" >
</div>


</div>
 
